<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">帐号资料</block>
		</cu-custom>
		<view>
			<view class="qui-cells">
				<view class="qui-cell">
					<view class="cell-hd"><text class="fw600 fs28">头像</text></view>
					<view class="cell-bd tr"><image :src="UserInfo.HeadIMg" class="icon_tx"></image></view>
					<view class="cell-ft arrow-r ml15"></view>
				</view>
			</view>
			<view class="qui-cells mt20">
				<view class="qui-cell">
					<view class="cell-hd"><text class="fw600 fs28">名称</text></view>
					<view class="cell-bd tr"><text class="text-muted" v-text="UserInfo.NickName"></text></view>
					<view class="cell-ft arrow-r ml15"></view>
				</view>
				<view class="qui-cell">
					<view class="cell-hd"><text class="fw600 fs28">性别</text></view>
					<view class="cell-bd tr"><text class="text-muted" v-text="UserInfo.Sex == 1 ? '男' : '女'"></text></view>
					<view class="cell-ft arrow-r ml15"></view>
				</view>
				<view class="qui-cell">
					<view class="cell-hd"><text class="fw600 fs28">生日</text></view>
					<view class="cell-bd tr"><text class="text-muted" v-text="UserInfo.Birthday != null ? UserInfo.Birthday.substring(0, 10) : ''"></text></view>
					<view class="cell-ft arrow-r ml15"></view>
				</view>
				<view class="qui-cell">
					<view class="cell-hd"><text class="fw600 fs28">邮箱</text></view>
					<view class="cell-bd tr"><text class="text-muted" v-text="UserInfo.Email"></text></view>
					<view class="cell-ft arrow-r ml15"></view>
				</view>
				<view class="qui-cell" @tap="UserInfo.Phone == null || UserInfo.Phone == '' ? (modalName = 'bindhone') : (modalName = 'unbindphone')">
					<view class="cell-hd"><text class="fw600 fs28">绑定手机</text></view>
					<view class="cell-bd tr"><text class="text-muted" v-text="UserInfo.Phone"></text></view>
					<view class="cell-ft arrow-r ml15"></view>
				</view>
			</view>
			<view class="qui-cells mt20">
				<navigator url="/pages/my/setting/address" class="qui-cell">
					<view class="cell-hd"><text class="fw600 fs28">收货地址</text></view>
					<view class="cell-bd tr"></view>
					<view class="cell-ft arrow-r ml15"></view>
				</navigator>
				<navigator url="/pages/my/setting/bank" class="qui-cell">
					<view class="cell-hd"><text class="fw600 fs28">提现管理</text></view>
					<view class="cell-bd tr"></view>
					<view class="cell-ft arrow-r ml15"></view>
				</navigator>
				<!-- <navigator url="" class="qui-cell" style="display: none;">
					<view class="cell-hd">
						<text class="fw600 fs28">帐号与安全</text>
					</view>
					<view class="cell-bd tr">
					
					</view>
					<view class="cell-ft arrow-r ml15"></view>
				</navigator> -->
			</view>
			<view class="qui-cells mt20" style="display: none;">
				<view class="qui-cell">
					<view class="cell-bd tc"><text class="text-red fs28 fw600">退出当前帐号</text></view>
				</view>
			</view>
		</view>
		<view class="cu-modal" :class="{ show: modalName == 'bindhone' }" style="z-index: 2;">
			<view class="cu-dialog pl30 padding-right bg-white" style="width: 600upx;">
				<view class="cu-bar justify-between">
					<view class="tl fs30">绑定手机</view>
					<view class="action" @tap="modalName = ''" style="justify-content: flex-end;"><text class="cuIcon-close text-muted"></text></view>
				</view>
				<view class="form-box">
					<view class="bg-color1 mb20 padding-sm radius10">
						<view class="fs30 tl fw600 pl20"><input type="text" class="cu-input fs26" v-model="Phone" v-reset-page placeholder="输入要绑定的手机号码" /></view>
					</view>
					<view class="bg-color1 padding-sm flex align-center radius10">
						<input type="text" class="uni-input bg-color1 tl" v-model="ramNum" v-reset-page placeholder="请输入验证码" style="flex: 1;" />
						<text class="text-main fs28 fw600 mr20" v-on:tap="sms" v-text="bindNewtips">获取验证码</text>
					</view>
				</view>
				<view class="cu-bar bg-white mt30 mb30"><button class="cu-btn bg-main lg round" @tap="Verify('bind')" style="flex: 1;">进行绑定</button></view>
			</view>
		</view>
		<view class="cu-modal" :class="{ show: modalName == 'unbindphone' }" style="z-index: 2;">
			<view class="cu-dialog pl30 padding-right bg-white" style="width: 600upx;">
				<view class="cu-bar justify-between"><view class="tl fs30">解除绑定</view>
					<view class="action" @tap="modalName = ''" style="justify-content: flex-end;"><text class="cuIcon-close text-muted"></text></view>
				</view>
				<view class="form-box">
					<view class="bg-color1 mb20 padding-sm radius10"><view class="fs30 tl fw600 pl20" v-text="UserInfo.Phone"></view></view>
					<view class="bg-color1 padding-sm flex align-center radius10">
						<input type="text" class="uni-input bg-color1 tl" v-model="ramNum" placeholder="请输入验证码" style="flex: 1;" />
						<text class="text-main fs28 fw600 mr20" v-on:tap="sms" v-text="bindNewtips" v-reset-page>获取验证码</text>
					</view>
				</view>
				<view class="cu-bar bg-white mt30 mb30"><button class="cu-btn bg-main lg round" @tap="Verify('unbind')" style="flex: 1;">解除绑定</button></view>
			</view>
		</view>
	</view>
</template>

<script>
	import Vue from 'vue';
import base from 'utils/base.js';
import tools from 'utils/tools.js';

Vue.directive('resetPage', {
  inserted: function (el) {
    // 监听键盘收起事件
    document.body.addEventListener('focusout', () => {
      if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
        //软键盘收起的事件处理
        setTimeout(() => {
          const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0
          window.scrollTo(0, Math.max(scrollHeight - 1, 0))
        }, 100)
      }
    })
  }
})

export default {
	data() {
		return {
			modalName: '',
			imgUrl: this.$imgurl,
			UserInfo: {},
			bindNewtips: '获取验证码',
			ramNum: '',
			Phone:''
		};
	},
	methods: {
		bindUserInfo: function() {
			let current = this;
			let globalData = getApp().globalData;
			let user = globalData.UserInfo;
			if(user=='') {
				
				let params = {
					type: 'GET',
					url: '/api/UserInfo/GetUserInfo',
					data: {},
					sCallback: function(response) {
						if (response.IsSuccess) {
							let userInfo = response.Data;
							globalData.UserInfo = userInfo;
							current.UserInfo = userInfo;
						
							current.Phone=current.UserInfo.Phone;
							uni.setStorageSync('UserInfo', userInfo);
						}
					}
				};
				base.request(params);
			}
			current.UserInfo = user;
			current.Phone=current.UserInfo.Phone;
		},
		Verify: function(type) {
			let current = this;
			let globalData = getApp().globalData;
			let user = globalData.UserInfo;
			if (current.Phone == null || current.Phone == '') {
				tools.showToast('请填写手机号码');
				return;
			}

			if (current.ramNum == null || current.ramNum == '') {
				tools.showToast('请输入验证码');
				return;
			}
			let params = {
				type: 'GET',
				url: '/api/Sms/Verify',
				data: { phone: current.Phone, num: current.ramNum, type: type },
				sCallback: function(response) {
					if (response.IsSuccess) {
						if (type == 'bind') {
							user.Phone = current.Phone;
							current.UserInfo = user;
							uni.setStorageSync('UserInfo', user);
							current.modalName = '';
						} else {
							user.Phone = '';
							current.Phone='';
							current.UserInfo = user;
							uni.setStorageSync('UserInfo', user);
							current.modalName = 'bindhone';
						}
						current.ramNum = '';
					} else {
						tools.showToast(response.Msg);
					}
				}
			};
			base.request(params);
		},
		sms: function() {
			let current = this;

			if (current.bindNewtips != '获取验证码') return;
			if (current.Phone != null && current.Phone != '') {
				let params = {
					type: 'GET',
					url: '/api/Sms/SmsVerifycode',
					data: { phone: current.Phone },
					sCallback: function(response) {
						if (response.IsSuccess) {
							let res = response.Data;
							if (res == 0) tools.showToast('发送失败');
							else if (res == -2) tools.showToast('上一个验证码未使用，请先使用！');
							else if (res == -3) tools.showToast('今天短信次数已用完，请24小时后再试！');
							else if (res > 1000) {
								tools.showToast('短信未开通，验证码已为您自动获取');
								current.ramNum = res;
							} else {
								let s = 60;

								tools.showToast('短信已发送,请注意查收！');
								let sto = setInterval(function() {
									s -= 1;
									current.bindNewtips = s + '秒';

									if (s <= 0) {
										current.bindNewtips = '获取验证码';
										clearInterval(sto);
									}
								}, 1000);
							}
						}
					}
				};
				base.request(params);
			} else {
				tools.showToast('请填写手机号码');
			}
		}
	},
	mounted() {
		let time = 0;
			let globalData = getApp().globalData;
		let current = this;
		let si = setInterval(function() {
			time = time + 1;
			if (globalData.ticket) {
				current.bindUserInfo();
				clearInterval(si);
			}
			if (time > 40) clearInterval(si);
		}, 200);
		
	}
};
</script>

<style lang="scss" scoped>
.icon_tx {
	width: 85upx;
	height: 85upx;
}
.bg-color1 {
	background-color: #f7f7f7;
}
.uni-input {
	box-sizing: content-box;
	padding-top: 0;
	padding-bottom: 0;
}
</style>
